<template>
  <div class="book-detail">
    <van-nav-bar
      title="图书详情"
      left-arrow
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="ellipsis" @click="showActionSheet" />
      </template>
    </van-nav-bar>
    
    <div class="book-info">
      <van-card
        :title="book.title"
        :desc="book.author"
        :thumb="book.coverUrl || 'https://img.yzcdn.cn/vant/ipad.jpeg'"
      >
        <template #tags>
          <van-tag plain type="primary">{{ book.category }}</van-tag>
          <van-tag plain type="success">{{ book.status }}</van-tag>
        </template>
      </van-card>
      
      <van-cell-group>
        <van-cell title="ISBN" :value="book.isbn" />
        <van-cell title="出版社" :value="book.publisher" />
        <van-cell title="出版日期" :value="book.publishDate" />
        <van-cell title="页数" :value="book.pages" />
        <van-cell title="语言" :value="book.language" />
      </van-cell-group>
      
      <van-cell-group title="图书简介">
        <van-cell>
          <div class="description">{{ book.description }}</div>
        </van-cell>
      </van-cell-group>
    </div>
    
    <div class="reading-progress">
      <van-cell-group title="阅读进度">
        <van-cell>
          <van-progress
            :percentage="progress.percent"
            stroke-width="8"
            pivot-text="已读"
            :pivot-color="progress.percent >= 100 ? '#07c160' : '#1989fa'"
          />
          <div class="progress-info">
            <span>当前页: {{ progress.currentPage }} / {{ book.pages }}</span>
            <van-button
              size="small"
              type="primary"
              @click="updateProgress"
              style="margin-left: 10px;"
            >
              更新进度
            </van-button>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    
    <div class="reading-notes">
      <van-cell-group title="读书笔记">
        <van-cell
          v-for="note in notes"
          :key="note.id"
          :title="`第${note.pageNumber}页`"
          :label="note.content"
          is-link
          @click="viewNote(note)"
        />
        <van-cell v-if="notes.length === 0" title="暂无笔记">
          <template #right-icon>
            <van-button size="small" type="primary" @click="addNote">添加笔记</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    
    <van-action-sheet
      v-model:show="showActions"
      :actions="actions"
      @select="onActionSelect"
    />
    
    <van-dialog
      v-model:show="showProgressDialog"
      title="更新阅读进度"
      show-cancel-button
      @confirm="confirmProgress"
    >
      <van-field
        v-model="newPageNumber"
        type="number"
        label="当前页数"
        placeholder="请输入当前页数"
      />
    </van-dialog>
    
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'BookDetail',
  setup() {
    const router = useRouter()
    const showActions = ref(false)
    const showProgressDialog = ref(false)
    const newPageNumber = ref('')
    const activeTab = ref(0)
    
    // 模拟图书数据
    const book = ref({
      id: 1,
      title: 'Vue.js设计与实现',
      author: '霍春阳',
      isbn: '9787115593146',
      publisher: '人民邮电出版社',
      publishDate: '2022-07',
      pages: 400,
      language: '中文',
      category: '技术',
      status: '在读',
      coverUrl: '',
      description: '这是一本关于Vue.js框架设计原理的深度解析书籍，从源码层面剖析Vue.js的设计思路和实现原理。'
    })
    
    // 模拟阅读进度
    const progress = ref({
      percent: 65,
      currentPage: 260
    })
    
    // 模拟读书笔记
    const notes = ref([
      { id: 1, pageNumber: 120, content: '响应式系统的实现原理很精妙' },
      { id: 2, pageNumber: 180, content: '虚拟DOM的diff算法优化点很多' }
    ])
    
    const actions = [
      { name: '编辑图书信息' },
      { name: '分享图书' },
      { name: '取消' }
    ]
    
    const goBack = () => {
      router.go(-1)
    }
    
    const goHome = () => {
      router.push('/')
    }
    
    const goToSearch = () => {
      router.push('/search')
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      router.push('/profile')
    }
    
    const showActionSheet = () => {
      showActions.value = true
    }
    
    const onActionSelect = (action) => {
      if (action.name === '编辑图书信息') {
        Toast('编辑图书信息')
      } else if (action.name === '分享图书') {
        Toast('分享图书')
      }
    }
    
    const updateProgress = () => {
      showProgressDialog.value = true
    }
    
    const confirmProgress = () => {
      const page = parseInt(newPageNumber.value)
      if (page && page > 0 && page <= book.value.pages) {
        progress.value.currentPage = page
        progress.value.percent = Math.round((page / book.value.pages) * 100)
        Toast.success('进度更新成功')
      } else {
        Toast.fail('请输入有效的页数')
      }
      newPageNumber.value = ''
    }
    
    const viewNote = (note) => {
      Toast('查看笔记: ' + note.content)
    }
    
    const addNote = () => {
      Toast('添加笔记')
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      showActions,
      showProgressDialog,
      newPageNumber,
      activeTab,
      book,
      progress,
      notes,
      actions,
      goBack,
      goHome,
      goToSearch,
      goToAddBook,
      goToProfile,
      showActionSheet,
      onActionSelect,
      updateProgress,
      confirmProgress,
      viewNote,
      addNote,
      onChangeTab
    }
  }
}
</script>

<style scoped>
.description {
  text-align: left;
  line-height: 1.6;
  color: #666;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
</style>